<template>
  <div>
    <el-select v-model="queryParams.hasAnswer" placeholder="是否有接听记录" clearable style="width: 150px">
      <el-option v-for="item in getEnumBySn('HAS_ANSWER_ENUM')" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <el-select  v-model="queryParams.sex" placeholder="性别" clearable style="width: 150px">
      <el-option v-for="item in getEnumBySn('sexEnum')" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <el-input v-model="queryParams.customName" placeholder="客户姓名" style="width: 150px"></el-input>
    <el-autocomplete
      style="width: 200px"
      v-model="queryParams.phoneCode"
      :fetch-suggestions="querySearch"
      clearable
      placeholder="转接手机编码"
    />
<!--    <el-select v-model="queryParams.phoneCode"  filterable clearable style="width: 200px" placeholder="转接手机编码">-->
<!--      <el-option v-for="item in phoneList" :label="item.label" :key="item.value"-->
<!--                 :value="item.value"></el-option>-->
<!--    </el-select>-->
    <el-select style="width: 120px" v-model="queryParams.indexId" placeholder="合作编号" filterable clearable>
      <el-option v-for="item in agencyList" :label="item.label" :key="item.id"
                 :value="item.value"></el-option>
    </el-select>
    <el-select style="width: 120px" v-model="queryParams.businessType" clearable filterable placeholder="业务类型">
      <el-option v-for="item in getEnumBySn('businessType')" :key="item.value" :label="item.label"
                 :value="item.value" />
    </el-select>
    <el-select style="width: 120px" v-model="queryParams.trusteeshipType" clearable filterable placeholder="托管类型">
      <el-option v-for="item in getEnumBySn('cycleTypeEnum')" :key="item.value" :label="item.label"
                 :value="item.value" />
    </el-select>
    <el-button style="margin-left: 10px" type="success" @click="fetchData">查询</el-button>
    <el-table :data="tableData" style="width: 100%"  :show-overflow-tooltip="true" border stripe>
      <el-table-column label="序号" width="60" align="center" >
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                       :label="column.label" :width="column.width" :align="column.align">
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right" align="center">
        <template v-slot="scope">
          <el-button @click="openVisible(scope.row.orderId)" size="mini"
                     type="danger">接听记录
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="转接类型" prop="transferType" width="160" align="center"/>
      <el-table-column label="联系方式" prop="identityPhone" width="200" align="center"/>
    </el-table>
    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems"
                   @current-change="currentChange" background layout="total,prev, pager, next"
                   class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>

    <el-drawer v-model="Visible" size="60%" :before-close="closeVisible">
      <Custody v-if="Visible" :orderId="currentOrderId" :filter="answerRecordFilter" @close="closeVisible"/>
    </el-drawer>
  </div>

</template>

<script lang="ts" setup>

import {ref} from "vue"
import request from "@/config/axios";
import {getEnumBySn, getIndexIdList, getPhoneList} from "@/api/enums";
import Custody from "@/views/tool/MissePhone/Custody.vue";

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);
const Visible = ref(false);
const currentOrderId = ref('');

const phoneList = ref([])

getPhoneList().then(res =>{
  phoneList.value = res
    .filter(item => !(item?.label && String(item.label).startsWith('00')))
    .map(item => ({'value':item.value, 'link': item.label})
  );

})

const agencyList = ref([])
getIndexIdList().then(res => {
  agencyList.value = res
})

const columns = ref([
  {prop: 'orderStatus', label: '状态', width: '70', align: 'center'},
  {prop: 'orderReceiveDate', label: '接单日期', width: '120', align: 'center'},
  {prop: 'orderEndDate', label: '结束日期', width: '120', align: 'center'},
  {prop: 'indexId', label: '合作编号', width: '90', align: 'center'},
  {prop: 'businessType', label: '业务类型', width: '90', align: 'center'},
  {prop: 'customName', label: '客户姓名', width: '100', align: 'center'},
  {prop: 'phoneCode', label: '转接手机号', width: '180',},
  {prop: 'trusteeshipType', label: '托管类型', width: '90', align: 'center'},
  {prop: 'answerRecordNum', label: '记录条数', width: '90', align: 'center'},

]);

const tableData = ref([]);
const queryParams = ref({})
const answerRecordFilter = ref({})
const taskDate = ref({})
const fetchData = async function (taskId) {
  const res = await request.get({
    url: '/answerRecordTask/listByTaskId',
    params:{
      ...queryParams.value,
      current: currentPage.value,
      size: pageSize.value,
    }
  })
  totalItems.value = res.total
  currentPage.value = res.current
  tableData.value = res.records
}

function openVisible(orderId) {
  Visible.value = true
  currentOrderId.value = orderId
}

const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}

function closeVisible() {
  Visible.value = false
}


const querySearch = (queryString: string, cb: any) => {
  const results = queryString && queryString != 'null'
    ? phoneList.value.filter(createFilter(queryString))
    : phoneList.value
  cb(results)
}

const createFilter = (queryString: string) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
    )
  }
}


defineExpose({
  initData:(taskData)=>{
    console.log('---2----',taskData)
    queryParams.value = {id: taskData.id}
    fetchData(taskData.id)
    taskDate.value = taskData
    answerRecordFilter.value = {startTime: taskData.answerRecordStartTime, endTime: taskData.answerRecordEndTime}
  }
})

</script>

<style scoped>
  .pagination {
    margin-top: 20px;
    float: right;
  }
</style>
